<template>
  <img
    :src=imgUrl
    :id="imgSnid + 'o'"
    style="width:100%;display: inline-block ;"
    :style="{'height': heightStyle}"
    alt="">
</template>
<script>
export default {
  name: 'MyVideo5',
  props: {
    imgSn: String,
    page: Number,
    imgSn2: String,
    NunString: String,
    heightStyle: String
  },
  data () {
    return {
      imgUrl: '',
      ws: null,
      imgSnid: '',
      wss: []
    }
  },
  created () {
    // console.log('传过来的url：', this.imgSn)
  },
  mounted () {
    console.log('video5')
    this.imgSnid = this.imgSn
    this.imgUrlComputed()
  },
  methods: {
    getUrl (sn) {
      const crypto = require('crypto')
      // eslint-disable-next-line no-unused-vars
      const https = require('https')

      // var sn = '615d9801-bc2485e4' // 设备SN
      // var sn = '8e5f3620-a9e28248' // 设备SN
      var port = 9080 // 要映射的端口

      // 只能查看属于你的设备，所以需要用AccessKey签名进行身份认证，请在https:://www.vzicar.com里创建AccessKey
      // eslint-disable-next-line camelcase
      var accesskey_id = 'GatQljhq22645eRVYPaG7LttgGkQ4YBI' // AccessKeyID
      // eslint-disable-next-line camelcase
      var accesskey_secret = '2TVinxAqh97RqKfmyToGFeHjqWMGyUsG' // AccessKeySecret

      var expires = parseInt(new Date().getTime() / 1000) + 7200
      var resource = `/v2/stp/user/devices/pdns?port=${port}&sn=${sn}&type=text`
      var canonicalString = `GET\n\n\n${expires}\n${resource}`

      var signature = crypto
        .createHmac('sha1', accesskey_secret)
        .update(canonicalString)
        .digest('base64')
      signature = encodeURIComponent(signature)

      // eslint-disable-next-line camelcase
      var url = `https://www.vzicar.com${resource}&accesskey_id=${accesskey_id}&expires=${expires}&signature=${signature}`

      // return this.arr;
      // console.log(url)
      // return res;
      var imgUrl = ''
      // eslint-disable-next-line no-unused-vars
      $.ajax({
        url: url,
        type: 'get',
        async: false,
        success: function (result) {
          imgUrl = result
        },
        error: function (result) {
          // console.log('result.error=', result)
        }
      })
      return imgUrl
    },
    imgUrlComputed () {
      // console.log('777', this.imgSn)
      // 链接服务端
      /* for (var s in this.wss) {
        //console.log(this.wss[s])
        this.wss[s].close()
      } */
      var id = this.imgSnid
      var ip = this.getUrl(this.imgSn)
      // console.log('ip')
      this.ws = new WebSocket('ws://' + ip + '/ws')
      // 配置客户端处理消息的回调方法
      this.ws.onmessage = function (event) {
        // var end_time = new Date().getTime()
        var reader = new FileReader()
        reader.onload = function (eve) {
          // 判断文件是否读取完成
          if (eve.target.readyState === FileReader.DONE) {
            this.imgUrl = this.result
            var img = document.getElementById(id + 'o')
            if (img != null) {
              img.src = this.result
            }
            return this.result
          }
        }
        reader.readAsDataURL(event.data)
      }
    }
  },
  beforeDestroy () {
    this.ws.close()
  }
}
</script>
